<template>
  <div class="productList">
    <!-- 搜索 -->
    <el-row class="search">
      <el-col :span="6">
        <el-input v-model="name" placeholder="请输入商品名称" @keydown.enter.native="search"></el-input>
      </el-col>
      <el-col :span="6" class="btn">
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button type="primary" @click="$router.push('/productManager/addDetail')">新增</el-button>
      </el-col>
    </el-row>

    <!-- 表格 -->
    <el-table :data="goodsList" border :height="getHeight()" class="table" style="width: 95%;">
      <el-table-column type="index" label="序号" width="50" align="center">
      </el-table-column>
      <el-table-column prop="pic_url" label="商品图片" width="200" align="center">
        <template slot-scope="{row}">
          <img :src="row.pic_url" alt="" style="width: 100px;">
        </template>
      </el-table-column>
      <el-table-column prop="name" label="商品名称" width="200" align="center">
      </el-table-column>
      <el-table-column prop="price" label="商品价格" width="120" align="center">
      </el-table-column>
      <el-table-column prop="brand" label="品牌名称" width="200" align="center">
      </el-table-column>
      <el-table-column prop="category" label="商品分类" width="160" align="center">
      </el-table-column>

      <el-table-column prop="stock" label="库存" width="120" align="center">
      </el-table-column>
      <el-table-column prop="detail_info" label="商品简介" align="center" width="450">
      </el-table-column>
      <el-table-column prop="coupon_id" label="优惠券id" align="center" width="200">
      </el-table-column>

      <el-table-column label="操作" width="200" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
          <el-button type="text" size="small" @click="editRow(scope.row)">编辑</el-button>
          <el-button @click.native.prevent="deleteRow(scope.row)" type="text" size="small" class="delbtn">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-row class="footer" style="margin: 20px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
        :page-sizes="[5, 10, 15, 20]" :page-size="limit" layout="total, sizes, prev, pager, next,jumper" :total="count">
      </el-pagination>
    </el-row>
  </div>
</template>
  
<script>
import { getGoodsInfo, delGoods, getCateGory } from '@/api/goods'

export default {
  name: 'productList',
  data() {
    return {
      name: '',
      page: 1,
      limit: 10,
      tableData: [],
      count: 0,
      categoryList: [],//分类列表
      num: 0,//请求次数
      goodsList: []
    }
  },
  created(){
    this.getGoodsList();
  },
  
  activated() {
    //console.log('已激活')
    this.getGoodsList();
   // this.$bus.$on('getGoodsList', this.getGoodsList)
  },

  destroyed() {
    console.log('商品列表已销毁');
  },
  
  methods: {
    //获取商品列表
    getGoodsList() {

      getGoodsInfo({
        name: this.name,
        page: this.page,
        limit: this.limit,
      }).then((res) => {
        // console.log(res)
        if (res.code === 1) {
          this.tableData = res.data.list
          this.count = res.data.count
        }

        getCateGory({
          page: 1,
          limit: 100
        }).then((res) => {
          //  console.log(111, res)
          this.num = Math.ceil(res.data.count / 100)
          //  console.log(this.num)

        }).then(async () => {
          this.categoryList = []
          for (let n = 1; n <= this.num; n++) {
            let res = await getCateGory({ page: n, limit: 100 })
            // console.log(222,res)
            this.categoryList.push(...res.data.list)
            //console.log(this.categoryList)
          }
        })
          .then(() => {
            // console.log(this.categoryList)
            this.tableData.forEach((item) => {
              this.categoryList.forEach((el) => {
                if (item.level1_category_id == el.id) {
                  item.c1 = el.name
                } else if (item.level2_category_id == el.id) {
                  item.c2 = el.name
                } else if (item.level3_category_id == el.id) {
                  item.c3 = el.name
                }
              })
              item.category = (item.c1 ? item.c1 + '/' : '') + (item.c2 ? item.c2 + '/' : '') + (item.c3 || '')
            })
            this.goodsList = this.tableData
          })


      },)
    },
    //改变每页多少条
    handleSizeChange(val) {
      this.limit = val
      this.getGoodsList()
    },
    //改变当前页
    handleCurrentChange(val) {
      this.page = val
      this.getGoodsList()
    },
    //获取表格高度
    getHeight() {
      return window.innerHeight - 240
    },
    //搜索
    search() {
      this.getGoodsList()
      this.name = ''
    },

    //删除
    deleteRow(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delGoods(row).then(
          (res) => {
            if (res.code == 1) {
              this.$message.success('删除成功')
              this.getGoodsList()
            }
          }
        )

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },

    //编辑
    editRow(row) {
      this.$router.push(`/productManager/addDetail?id=${row.id}`)
    },
    //详情
    handleClick() {

    }
  },

}
</script>  
  
<style scoped>
.btn {
  margin-left: 20px;
}

.search {
  margin: 20px;
}

.table {
  margin: 20px;
}

.delbtn {
  color: red;
}

.footer {
  margin-left: 20px;
}
</style>
  